/*
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-08-15 15:16:10
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-23 10:46:17
 * @FilePath: \四阶段项目\src\components\workorder\DisposeWorkorder.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React,{useState,useEffect} from 'react'
import {inject,observer} from 'mobx-react'
import { toJS } from 'mobx';
import { Button , message} from 'antd';
import '../../assets/css/workordercss/UpdeleteWorkorder.css'



 function DisposeWorkorder(props) {
  const [data,setData]=useState({})
  useEffect(() => {
    const data=toJS(props.workOrderStore.CheckWorkOrderList)
    setData(data)
    console.log('当前页面的',data);
    

  }, [props.workOrderStore.CheckWorkOrderList]);
 
  // const changeData=()=>{
  //   setData(data=)
  // }
  // const onChange = (checkedValues) => {
  //   console.log('checked = ', checkedValues);
  // };

  // const options = [
  //   { label: '未处理', value: '未处理' },
  //   { label: '处理中', value: '处理中' },
  //   { label: '已完成', value: '已完成' },
  // ];
  const info = () => {
    message.info('保存成功');
  };
 
  const dome=(e)=>{
    console.log(e.target.value,e.target.dataset.key);
    const obj ={...data}
    obj[e.target.dataset.key]=e.target.value
    setData(obj)
    console.log(obj,'baocun');
    console.log(data);
    props.workOrderStore.updateWorkOrder(data)
 } 

 
  return (
    <div  id="mod">
    <h3>工单处理结果</h3>
    <ul>
    <li style={{ display: "flex" }}>
    <span>*客户名称</span>
    <span>
      <input type="text" value={data.customer_name}  onChange={(e)=>dome(e)} key={data.customer_name} data-key='customer_name'/>
    </span>
  </li>{" "}
  <li style={{ display: "flex" }}>
        <span>关联信息</span>
          <Button>基本资料</Button>
          <Button>跟单</Button>
          <Button>订单</Button>
          <Button>合同</Button>
          <Button>售后</Button>
          <Button>收支</Button>
      </li>{" "}
      <li style={{ display: "flex" }}>
      <span>客户联系人</span>
      <span>
        <input type="text" defaultValue={data.contact_name} onChange={(e)=>dome(e)}  data-key='contact_name'/>
      </span>
    </li>{" "}
    <li style={{ display: "flex" }}>
    <span>工单类型</span>
    <span>
      <input type="text" defaultValue={data.work_order_type} onChange={(e)=>dome(e)} data-key='work_order_type'/>
    </span>
  </li>{" "}
  <li style={{ display: "flex" }}>
  <span>*指派人员</span>
    <input type="text" value={data.work_order_type} onChange={(e)=>dome(e)} key={data.work_order_type} data-key='work_order_type'/>
    <Button className='xuanzherenyuan'>选择指派人员</Button>
</li>{" "}
<li style={{ display: "flex" }}>
<span>起始时间</span>
<span>
  <input type="text" defaultValue={data.start_time} onChange={(e)=>dome(e)}  data-key='start_time'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>结束时间</span>
<span>
  <input type="text" defaultValue={data.end_time} onChange={(e)=>dome(e)}  data-key='end_time'/>
</span>
</li>
<li style={{ display: "flex" }}>
<span>交通方式</span>
<span>
<input type="text" defaultValue={data.traffic_mode} onChange={(e)=>dome(e)}  data-key='traffic_mode'/>
</span>
</li>{" "}
<li style={{ display: "flex" }}>
<span>*差旅联系人</span>

<Button className='xuanzherenyuan'>选择</Button>
<Button className='xuanzherenyuan'>新建联系人</Button>
  <input type="text" value={data.travel_contact} onChange={(e)=>dome(e)} key={data.travel_contact} data-key='travel_contact'/>

</li>
<li style={{ display: "flex" }}>
    <span>工作描述</span>
    <span>
      <input type="text" defaultValue={data.job_describe} onChange={(e)=>dome(e)} key={data.job_describe} data-key='job_describe'/>
    </span>
  </li>
  <li style={{ display: "flex" }}>
  <span>工作记录</span>
  
    <Button>工作记录</Button>
  
</li>
<li style={{ display: "flex" }}>
  <span>*发起人</span>
  <span>
  <input type="text" disabled={false} value={data.user_name} onChange={(e)=>dome(e)} key={data.user_name} data-key='user_name'/>
  </span>
</li>
<li style={{ display: "flex" }}>
 <span>操作</span> 
  <Button onClick={info}>保存</Button>
  <Button>关闭</Button>
</li>

      </ul>
    
    </div>
  )
}
export default inject('workOrderStore')(observer(DisposeWorkorder))